<template>
    <div class="Money">
        <div class="top">
            <TopBar class="t" :title="'我的钱包'" :url="'/index/my'" :color="'#ffffff'"></TopBar>
            <div>
                <h2>596.00</h2>
                <h3>可提现金额</h3>
            </div>
        </div>
        <div class="bottom">
            <div class="title">
                <span>我要提现</span>
                <span>提现记录</span>
            </div>
            <div class="content">
                <div class="content-top">
                    <span>收支明细</span>
                    <span>2021年2月</span>
                </div>
                <ul>
                    <router-link to="/pay/success">
                        <li>
                            <div class="li-1">
                                <span>10-18</span>
                                <p>16:00</p>
                            </div>
                            <div class="li-2">
                                <span>课程购买</span>
                                <p>订单号: 201901181600001</p>
                            </div>
                            <div class="li-3">
                                -199.00
                            </div>
                        </li>
                    </router-link>
                    <router-link to="/pay/success">
                        <li>
                            <div class="li-1">
                                <span>10-17</span>
                                <p>16:00</p>
                            </div>
                            <div class="li-2">
                                <span>用户提现</span>
                                <p>订单号: 201901181600001</p>
                            </div>
                            <div class="li-3">
                                -200.00
                            </div>
                        </li>
                    </router-link>
                    <router-link to="/pay/success">
                        <li>
                            <div class="li-1">
                                <span>10-17</span>
                                <p>16:00</p>
                            </div>
                            <div class="li-2">
                                <span>课程销售</span>
                                <p>订单号: 201901181600001</p>
                            </div>
                            <div class="li-3">
                                -199.00
                            </div>
                        </li>
                    </router-link>
                    <router-link to="/pay/success">
                        <li>
                            <div class="li-1">
                                <span>10-16</span>
                                <p>16:00</p>
                            </div>
                            <div class="li-2">
                                <span>课程销售</span>
                                <p>订单号: 201901181600001</p>
                            </div>
                            <div class="li-3">
                                -199.00
                            </div>
                        </li>
                    </router-link>
                    <router-link to="/pay/success">
                        <li>
                            <div class="li-1">
                                <span>10-15</span>
                                <p>16:00</p>
                            </div>
                            <div class="li-2">
                                <span>课程购买</span>
                                <p>订单号: 201901181600001</p>
                            </div>
                            <div class="li-3">
                                -199.00
                            </div>
                        </li>
                    </router-link>
                    </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import TopBar from "../../../component/TopBar";
    export default {
        name: "Money",
        components:{
            TopBar
        },
        data(){
            return{

            }
        },
    }
</script>

<style lang="stylus" scoped>
.Money
  .top
    height 2rem
    background-color #6B5CEB
    padding 0.12rem
    text-align center
    h2
      color #ffffff
      font-size 0.27rem
      padding-top 0.4rem
    h3
      font-size 0.12rem
      color #cccccc
  .bottom
    .title
      height 0.5rem
      text-align center
      display flex
      align-items center
      span
        width 50%
    .content
      padding 0 0.12rem 0 0.12rem
      ul
        li
          display flex
          padding 0.12rem
          border_1px(0 0 1px 0, #dddddd)

          .li-1
            flex 2
            span
              color black
              font-size 0.13rem
            p
              padding-top 0.03rem
              color #cccccc
              font-size 0.12rem
          .li-2
            color black
            flex 10
            padding-left 0.2rem
            span
              color black
            p
             color #cccccc
           .li-3
             padding-top 0.15rem
             flex 1
             color red
      .content-top
        display flex
        justify-content space-between
        span
          font-weight 600


</style>